<template>
  <div>
    <!-- 添加按钮 -->
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin: 10px 0"
      @click="showDialog"
      >添加</el-button
    >
    <!-- 品牌表格 -->
    <!-- 
    data  显示的数据
    prop	对应列内容的字段名，也可以使用 property 属性
    type:index 通过给 type=index 的列传入 index 属性，可以自定义索引  
    slot-scope  用于给插槽定义作用域
    label   显示的标题
   -->
    <el-table style="width: 100%" border :data="list">
      <el-table-column prop="id" label="序号" width="80px" align="center">
      </el-table-column>
      <el-table-column prop="tmName" label="品牌名称"></el-table-column>
      <el-table-column prop="logoUrl" label="品牌Logo">
        <template slot-scope="{ row, $index }">
          <img :src="row.logoUrl" alt="" style="width: 200px" />
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作">
        <template slot-scope="{ row, $index }">
          <el-button
            type="warning"
            icon="el-icon-edit"
            @click="updateTradeMark(row)"
            >修改</el-button
          >
          <el-button type="primary" icon="el-icon-delete" @click="deleteTrademark(row)"> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <!-- 
    layout 组件布局，子组件名用逗号分隔
    current-page	当前页数，支持 .sync 修饰符
    page-sizes	每页显示个数选择器的选项设置
    page-size	每页显示条目个数，支持 .sync 修饰符
    total	总条目数
   -->
    <el-pagination
      style="margin-top: 20px; text-align: center"
      layout="prev, pager, next, jumper, ->,sizes,total"
      :current-page="page"
      :page-size="limit"
      @size-change="handleSizeChange"
      @current-change="getPageList"
      :page-sizes="[3, 5, 10]"
      :total="total"
    >
    </el-pagination>
    <!-- 添加品牌对话框 -->
    <el-dialog
      :title="tmForm.id ? '修改品牌' : '添加品牌'"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <!-- 品牌名称 -->
      <el-form
        style="width: 80%"
        :model="tmForm"
        :rules="rules"
        ref="ruleform"
      >
        <el-form-item label="品牌名称" label-width="80px" prop="tmName">
          <el-input v-model="tmForm.tmName"></el-input>
        </el-form-item>
        <el-form-item label="品牌Logo" prop="logoUrl">
          <el-upload
            class="avatar-uploader"
            action="/dev-api/admin/product/fileUpload"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar" />
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
            ></i>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddOrUpdateTradeMark"
          >添 加</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:"TradeMark",
  props: {

  },
  components: {

  },
  data() {
    return {
      // 分页器当前页数
      page:1,
      // 当前页数展示条目
      limit:3,
      // 总共数据条数
      total:0,
      // 商品列表信息
      list:[],
      // 是否显示对话框
      dialogVisible:false,
      // 对话框数据
      tmForm:{
        tmName:"",
        logoUrl:""
      },
      // 对话框表单校验
      rules:{
        tmName: [
              { required: true, message: '请输入品牌名称', trigger: 'blur' },
              { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' },
            ],
        logoUrl:[
          { required: true, message: '请选择品牌Logo' }
        ]
      }
    };
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {
    // 在切换到页面时发送请求获得品牌信息
    this.getPageList()
    this.handleSizeChange(this.limit)
  },
  methods: {
    // 获取品牌接口功能
    async getPageList(pager=1){
      this.page=pager;
      const {page,limit}=this
      const res=await this.$API.trademark.reqTradeMarkList(page,limit)
      // console.log(res);
      this.total=res.data.total
      this.list=res.data.records
    },
    // 切换每页最大显示商品数目功能
    handleSizeChange(limit){
      this.limit=limit;
      // 重新发送请求
      this.getPageList()
    },
    // 显示添加品牌对话看
    showDialog(){
      this.dialogVisible=true
      // 初始化对话框数据
      this.tmForm={tmName:"",logoUrl:""}
    },
    // 上传图像成功回调
    handleAvatarSuccess(res, file) {
      console.log(res);
      // 收集品牌图片数据
        this.tmForm.logoUrl = res.data
      },
    // 上传前回调
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      // 更新或添加品牌功能
    AddOrUpdateTradeMark(){
      // 表单验证通过后再去验证业务逻辑
      this.$refs.ruleform.validate(async(success) =>{
        // 如果表单验证成功
        if(success) {
          this.dialogVisible=false;
        // 发起请求
          let result=await this.$API.trademark.reqAddOrUpdateTradeMarkList(this.tmForm)
          console.log(result);
          // 如果请求成功
          if(result.code===200){
            // 判断是添加还是更新
            this.$message({
              type:"success",
              message:this.tmForm.id?"修改成功":"添加成功"
          })
          // 再次发起请求获得数据,判断点击的是修改还是添加
          this.getPageList(this.tmForm.id?this.page:1)
          }
        }
        else{
            console.log('error submit!!');
            return false;
        }
      })
  },
  // 修改品牌功能
  updateTradeMark(row){
    this.dialogVisible=true;
    console.log(row);
    // 浅拷贝当前页数据,点击取消不上传到服务器
    this.tmForm={...row}
  },
  deleteTrademark(row){
    this.$confirm(`是否删除${row.tmName}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(async() => {
          // 发送删除请求
          const result=await this.$API.trademark.reqDeleteTradeMark(row.id)
          if(result.code==200){
             this.$message({
            type: 'success',
            message: '删除成功!'
            });
            // 如果是一页就返回当前页如果不是则返回
            this.getPageList(this.list.length>1?this.page:this.page-1)
          }
          })
          .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
          });
          }
         
  }

};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
